<template>
  <div class="page-container">
    <el-form label-position="top" class="custom-form">
      <el-form-item label="图片目录" class="form-item-group">
        <el-input
          v-model="framesDir"
          placeholder="选择包含图片的目录"
          readonly
          class="form-input"
        >
          <template #append>
            <el-button
              type="primary"
              class="browse-btn"
              @click="selectFramesDirFn"
              >浏览</el-button
            >
          </template>
        </el-input>
      </el-form-item>

      <el-form-item label="输出目录" class="form-item-group">
        <el-input
          v-model="outputDir"
          placeholder="选择输出目录"
          readonly
          class="form-input"
        >
          <template #append>
            <el-button
              type="primary"
              class="browse-btn"
              @click="selectOutputDirFn"
              >浏览</el-button
            >
          </template>
        </el-input>
      </el-form-item>

      <!-- <el-form-item label="FFmpeg路径" class="form-item-group">
        <el-input
          v-model="ffmpegPath"
          placeholder="选择ffmpeg.exe"
          readonly
          class="form-input"
        >
          <template #append>
            <el-button
              type="primary"
              class="browse-btn"
              @click="selectFfmpegPathFn"
              >浏览</el-button
            >
          </template>
        </el-input>
        <div class="form-help">如果ffmpeg.exe在当前目录，可以留空</div>
      </el-form-item> -->

      <el-form-item label="帧率" class="form-item-group">
        <el-input-number
          v-model="frameRate"
          :min="1"
          :max="60"
          :step="1"
          style="width: 100%"
          class="form-input"
        />
      </el-form-item>

      <el-form-item label="速度" class="form-item-group">
        <el-input-number
          v-model="speed"
          :min="0.1"
          :max="5"
          :step="0.1"
          style="width: 100%"
          class="form-input"
        />
      </el-form-item>

      <el-form-item label="缩放尺寸" class="form-item-group">
        <el-select v-model="scale" style="width: 100%" class="form-select">
          <el-option
            v-for="option in scaleAry"
            :key="option.value"
            :label="option.label"
            :value="option.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="输出名称" class="form-item-group">
        <el-input
          v-model="outputName"
          placeholder="输出GIF的文件名（不包含后缀）"
          class="form-input"
        />
        <div class="form-help">留空则使用图片目录名作为文件名</div>
      </el-form-item>

      <el-form-item class="progress-section">
        <div class="progress-label">处理进度</div>
        <el-progress
          :percentage="progress"
          :status="progressStatus"
          :text-inside="true"
          :stroke-width="18"
          class="custom-progress"
        />
      </el-form-item>

      <el-form-item v-if="statusVisible" class="status-section">
        <el-alert
          :title="statusMessage"
          :type="statusType"
          show-icon
          class="status-alert"
        />
      </el-form-item>

      <el-form-item class="button-section">
        <el-button
          type="success"
          class="primary-btn"
          @click="imagesToGifFn"
          :disabled="isProcessing"
          >开始转换</el-button
        >
        <el-button type="default" class="secondary-btn" @click="clearFormFn"
          >清空</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, onUnmounted } from 'vue';

// 响应式数据
const framesDir = ref('');
const outputDir = ref('');
const outputName = ref('');
const ffmpegPath = ref('');
const frameRate = ref(5);
const speed = ref(1.0);
const scale = ref('640:-1');
const progress = ref(0);
const progressStatus = ref('');
const statusMessage = ref('');
const statusType = ref('info');
const statusVisible = ref(false);
const isProcessing = ref(false);

// 缩放尺寸选项
const scaleAry = reactive([
  { label: '640px 宽', value: '640:-1' },
  { label: '800px 宽', value: '800:-1' },
  { label: '1024px 宽', value: '1024:-1' },
  { label: '1920px 宽', value: '1920:-1' },
  { label: '480px 高', value: '-1:480' },
  { label: '720px 高', value: '-1:720' },
]);

// 选择图片目录
const selectFramesDirFn = async () => {
  const paths = await window.electronAPI.openDirectoryDialog();
  if (paths.length > 0) {
    framesDir.value = paths[0];
  }
};

// 选择输出目录
const selectOutputDirFn = async () => {
  const paths = await window.electronAPI.openDirectoryDialog();
  if (paths.length > 0) {
    outputDir.value = paths[0];
  }
};

// 选择FFmpeg路径
const selectFfmpegPathFn = async () => {
  const paths = await window.electronAPI.openFileDialog({
    filters: [{ name: '可执行文件', extensions: ['exe'] }],
  });
  if (paths.length > 0) {
    ffmpegPath.value = paths[0];
  }
};

// 显示状态信息
const showStatusFn = (message, type) => {
  statusMessage.value = message;
  statusType.value = type;
  statusVisible.value = true;
};

// 更新进度值
const progressValueUpdateFn = value => {
  progress.value = value;
  if (value === 100) {
    progressStatus.value = 'success';
  } else {
    progressStatus.value = '';
  }
};

// 开始转换为GIF
const imagesToGifFn = async () => {
  if (!framesDir.value) {
    showStatusFn('请选择图片目录', 'error');
    return;
  }

  if (!outputDir.value) {
    showStatusFn('请选择输出目录', 'error');
    return;
  }

  // 重置进度状态
  isProcessing.value = true;
  progress.value = 0;
  progressStatus.value = '';
  statusVisible.value = false;
  showStatusFn('开始创建GIF...', 'info');

  try {
    const result = await window.electronAPI.imagesToGif({
      framesDir: framesDir.value,
      outputDir: outputDir.value,
      outputName: outputName.value,
      ffmpegPath: ffmpegPath.value,
      frameRate: frameRate.value,
      speed: speed.value,
      scale: scale.value,
    });
    showStatusFn(result.message + '，文件保存于: ' + result.outputPath, 'success');
    progressValueUpdateFn(100);
  } catch (error) {
    showStatusFn('创建失败: ' + error.message, 'error');
  } finally {
    isProcessing.value = false;
  }
};

// 清空表单
const clearFormFn = () => {
  framesDir.value = '';
  outputDir.value = '';
  outputName.value = '';
  ffmpegPath.value = '';
  frameRate.value = 5;
  speed.value = 1.0;
  scale.value = '640:-1';
  progress.value = 0;
  progressStatus.value = '';
  statusVisible.value = false;
};

// 监听进度更新
const progressUpdateFn = progress => {
  if (progress.type === 'images-to-gif') {
    if (progress.error) {
      showStatusFn('转换失败: ' + progress.error, 'error');
      isProcessing.value = false;
      return;
    }
    progressValueUpdateFn(progress.progress);
  }
};

// 生命周期钩子
onMounted(() => {
  window.electronAPI.onProgressUpdate(progressUpdateFn);
});

onUnmounted(() => {
  window.electronAPI.removeProgressListener();
});
</script>

<style scoped>
</style>
